<template>
  <el-dialog
    @open="mixinOpen"
    @close="handleClose(), (checkList = [])"
    :title="title"
    :visible="dialogVisible"
    width="80%"
  >
    <el-form
      :model="postData"
      :rules="postRules"
      label-width="120px"
      label-position="left"
      ref="postForm"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item prop="name" label="角色名字">
            <el-input v-model="postData.name" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="isSchool" label="是否是学区房">
            <el-select v-model="postData.isSchool">
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="description" label="角色描述">
            <el-input type="textarea" v-model="postData.description" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="auth" label="权限配置">
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-for="item in authLists"
                :key="item.id"
                :label="item.id"
                @change="handleChange"
                >{{ item.name }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button @click="submit" type="primary">提 交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import postDialog from "../../../mixins/postDialog";
import axios from "axios";

export default {
  name: "postDialog",
  mixins: [postDialog],
  data() {
    return {
      postData: {
        name: "",
        isSchool: 1,
        description: "",
        auth: ""
      },
      postRules: {
        name: [{ required: true, message: "请输入角色名字", trigger: "blur" }],
        isSchool: [{ required: true, message: "请选择", trigger: "blur" }],
        description: [
          { required: true, message: "请输入描述", trigger: "blur" }
        ]
      },
      addUrl: "/api/role/role",
      authLists: [],
      checkList: []
    };
  },
  async mounted() {
    const {
      data: { errno, message, data }
    } = await axios.get("/api/menu/menu/all");
    if (!errno) {
      this.authLists = data;
    } else {
      this.$message({ type: "error", message });
    }
  },
  methods: {
    handleChange() {
      this.postData.auth = this.checkList.join();
    },
    initCheckList() {
      if (this.postData.auth) {
        if (this.postData.auth === "all") {
          this.checkList = this.authLists.map(item => +item.id);
        } else {
          this.checkList = this.postData.auth.split(",").map(item => +item);
        }
      }
    },
    async mixinOpen() {
      await this.handleOpen();
      this.initCheckList();
    }
  }
};
</script>

<style scoped></style>
